﻿@{
    ViewData["Title"] = "ShowRole";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="margin:20px 20px">
    <body>
        <div style="margin:60px 60px">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="RoleName" autocomplete="off">
            </div>
            <button type="button" class="layui-btn layui-btn-primary" id="searchBtn"><i class="layui-icon"></i> 搜 索</button>
            <div class="layui-inline">
                <button type="button" class="layui-btn" onclick="onAddBtn()">新增角色</button>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
            <table id="ID-table-demo-setRowChecked"></table>
            <div id="pagesbox"></div>

            <!--添加的弹出层-->
            <div id="add-main" style="display: none;">
                <form class="layui-form" id="add-form" action="">
                    <div class="layui-form">
                        <div class="layui-form-item">

                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <div class="layui-input-group">
                                        <div class="layui-input-prefix">
                                            名称：
                                        </div>
                                        <input type="text" id="roleName" name="roleName" placeholder="请选择名称" class="layui-input" style="width:400px">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <div class="layui-input-group">
                                        <div class="layui-input-prefix">
                                            备注：
                                        </div>
                                        <input type="text" id="roleRemark" name="roleRemark" placeholder="请选备注" class="layui-input" style="width:400px">
                                        <input type="hidden" name="createBy" id="createBy"> <!--创建人-->
                                        <input type="hidden" name="createDate" id="createDate"> <!--创建时间-->
                                    </div>
                                </div>
                            </div>


                            <input type="hidden" name="roleId" />

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <script>
                layui.use(['table', 'laypage', 'form'], function () {
                    var table = layui.table;
                    var laypage = layui.laypage;
                    var layer = layui.layer;
                    var $ = layui.$;
                    var form = layui.form;

                    var pageSize = 15; // 每页显示条数
                    //获取列表
                    function getListData(pageIndex) {
                        //获取查询条件
                        var RoleName = $('#RoleName').val();
                        //ajax后台交互
                        $.ajax({
                            url: 'http://10.31.60.18:8000/AuthorizationPeopleGetRout/api/RoleShow/ShowPageRoleInfo',
                            type: 'get',
                            dataType: 'json',
                            //参数
                            data: {
                                pageIndex: pageIndex,
                                pageSize: pageSize,
                                RoleName: RoleName,
                            },
                            success: function (res) {
                                //渲染表格数据
                                table.render({
                                    //挂载的表格id
                                    elem: '#ID-table-demo-setRowChecked',
                                    cols: [[
                                        { type: 'checkbox', width: 60, fixed: 'center', unresize: true, align: 'center' },
                                        { type: 'numbers', title: '序号', width: 60, fixed: 'center', unresize: true, align: 'center' },
                                        { field: 'roleName', title: '角色名称', width: 120, align: 'center' },
                                        { field: 'roleRemark', title: '角色备注', width: 120, align: 'center' },
                                        { field: 'createBy', title: '操作人', width: 120, align: 'center' },
                                        {
                                            field: 'createDate', title: '操作时间', width: 120, align: 'center', templet: function (data) {
                                                if (data.createDate != null) {
                                                    return data.createDate.substring(0, 10)
                                                }
                                                else {
                                                    return "";
                                                }
                                            }
                                        },
                                        { field: 'updateBy', title: '修改人', width: 120, align: 'center' },
                                        {
                                            field: 'updateDate', title: '修改时间', width: 120, align: 'center', templet: function (data) {
                                                if (data.updateDate != null) {
                                                    return data.updateDate.substring(0, 10)
                                                }
                                                else {
                                                    return "";
                                                }
                                            }
                                        },
                                        { title: '操作', width: 120, align: 'center', templet: '#barDemo', fixed: 'right', unresize: true },
                                    ]],
                                    data: res.datas
                                });

                                //分页
                                laypage.render({
                                    //挂载的分页id
                                    elem: 'pagesbox',
                                    count: res.totalCount,
                                    limit: pageSize,
                                    curr: pageIndex,
                                    layout: ['count', 'prev', 'page', 'next', 'skip'],
                                    jump: function (obj, first) {
                                        if (!first) {
                                            getListData(obj.curr);
                                        }
                                    }
                                });

                            }
                        });
                    }

                    $('#searchBtn').on('click', function () {
                        getListData(1);
                    });

                    //文档结构加载完之后执行
                    $(function () {
                        // 初始化加载数据
                        getListData(1);
                    })

                    // 监听表单提交
                    form.on('submit(save)', function (data) {
                        if ($("[name='roleId']").val() == "") {
                            var formData = {
                                RoleName: $("#roleName").val(),
                                RoleRemark: $("#roleRemark").val(),
                            };

                            $.ajax({
                                url: 'http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/AddRole', // 替换为您的后端API接口地址
                                type: 'post',
                                data: JSON.stringify(formData),
                                contentType: 'application/json',
                                success: function (res) {
                                    if (res > 0) {

                                        //示范对话框所有内置图标
                                        layer.alert('添加成功', {
                                            icon: 1,
                                            shadeClose: true,
                                            title: "角色添加",
                                        }, function () {
                                            location.href = '/Role/ShowRole'
                                        });

                                    } else {
                                        //layer.msg(res.msg, { icon: 2 });
                                        alert("添加失败！");
                                    }
                                },
                                error: function () {
                                    layer.msg('网络错误，请稍后重试', { icon: 2 });
                                }
                            });
                        }
                        else {
                            var formData = {
                                RoleId: $("[name='roleId']").val(),  //获取主键id
                                RoleName: $("#roleName").val(),
                                RoleRemark: $("#roleRemark").val(),
                                createBy: $("#createBy").val(),
                                createDate: $("#createDate").val(),
                            };
                            $.ajax({
                                url: 'http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/UpdateRole',
                                type: 'put',
                                data: JSON.stringify(formData),
                                contentType: 'application/json',
                                success: function (res) {
                                    if (res > 0) {
                                        //跳转页面
                                        location.href = '/Role/ShowRole'
                                    }
                                    else {
                                        layer.msg(res, { icon: 2 });
                                    }
                                }
                            })
                        }
                        return false; // 阻止表单跳转
                    });

                    // 重置按钮点击事件
                    $('#closeBtn').on('click', function () {
                        layer.closeAll();
                    });

                    // 单删除
                    function deleteData(roleId) {
                        $.ajax({
                            url: `http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/FalseDelete?roleId=${roleId}`,
                            type: 'delete',
                            success: function (res) {
                                if (res > 0) {
                                    layer.msg('删除成功');
                                    getListData(1);
                                } else {
                                    layer.msg('删除失败');
                                    getListData(1);
                                }
                            },
                            error: function () {
                                layer.msg('删除请求失败');
                            }
                        });

                    }

                    // 监听工具条，实现删除功能
                    table.on('tool(ID-table-demo-setRowChecked)', function (obj) {
                        var data = obj.data;
                        if (obj.event == 'edit') {
                            editData(data.roleId); // 传递正确的数据项ID进行编辑操作
                        }
                        if (obj.event == 'delete') {
                            layer.confirm('确定删除吗？', function (index) {
                                deleteData(data.roleId); // 传递正确的数据项ID
                                layer.close(index);
                            });
                        }
                    });

                    // 批量删除
                    $(".delAll_btn").click(function () {
                        var checkStatus = table.checkStatus('ID-table-demo-setRowChecked'),
                            data = checkStatus.data,
                            roleId = "";
                        if (data.length > 0) {
                            for (var i in data) {
                                roleId += data[i].roleId + ",";
                            }
                            roleId = roleId.substring(0, roleId.length - 1);
                            console.log(roleId);
                            layer.confirm('确定删除选中的记录？', { icon: 3, title: '提示信息' }, function (index) {
                                $.ajax({
                                    url: `http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/AllFalseDeleteRole?roleId=${roleId}`,
                                    type: 'put',
                                    success: function (res) {
                                        if (res > 0) {
                                            layer.msg("批量删除成功");
                                            getListData(1);
                                        } else {
                                            layer.msg("批量删除失败");
                                        }
                                    },
                                    error: function () {
                                        layer.msg('批量删除请求失败');
                                    }
                                });
                                layer.close(index);
                            });
                        } else {
                            layer.msg("请选择需要删除的记录");
                        }
                        console.log(checkStatus);
                    });

                    //反填
                    function editData(roleId) {
                        $.ajax({
                            url: 'http://10.31.60.18:8000/AuthorizationPeopleGetRout/api/RoleShow/BackRoleInfo?RoleId=' + roleId,
                            type: 'get',
                            contentType: 'application/json',
                            success: function (res) {
                                if (res != null) {
                                    // 填充编辑数据
                                    $("[name='roleId']").val(roleId),
                                    $("#roleName").val(res.roleName);
                                    $("#roleRemark").val(res.roleRemark);
                                    $("#createBy").val(res.createBy);
                                    $("#createDate").val(res.createDate);

                                    layer.open({
                                        type: 1,
                                        title: "修改新记录",
                                        shift: 2,
                                        area: ['500px', '300px'],
                                        shade: 0,
                                        shadeClose: false,
                                        content: $("#add-main"),
                                        success: function (layero, index) {
                                            layui.form.render(); // 重新渲染表单
                                        }
                                    });


                                } else {
                                    layer.msg(res.msg, { icon: 5 });
                                }
                            },
                            error: function (err) {
                                // 处理请求错误
                            }
                        });
                    }
                });
            </script>

            <script>
                var $ = layui.jquery;
                // 添加弹出层
                function onAddBtn() {
                    var laydate = layui.laydate;
                    // 渲染
                    laydate.render({
                        elem: '#storageDate'
                    });

                    layer.open({
                        type: 1,
                        title: "添加角色信息",
                        closeBtn: false,
                        shift: 12,
                        area: ['500px', '300px'],
                        shade: 0,
                        shadeClose: false,
                        content: $("#add-main"),
                        success: function (layero, index) {

                        }
                    });
                }
            </script>

        </div>
        <script type="text/html" id="barDemo">
            <div class="layui-btn-container">
                <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
            </div>
        </script>
    </body>
</div>